<template>
  <div>
    <el-card style="width:100%;height:calc(100vh - 40px);">
      <div slot="header" class="clearfix">
        <span>客户留言</span>
      </div>
      <div class="customerMessage flex flex-h">
        <ul class="customerList">
          <li
            class="nameList flex"
            v-for="(item,index) in customerList"
            :key="index"
            @click="checkMessage(item,index)">
            <span>{{item.username}}</span>
            <!-- <i :class="['dot',{'active':item.status=='1'}]"></i> -->
          </li>
        </ul>
        <div class="tableBox">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="客户id">
                <template slot-scope="scope">
                <div v-if="scope.row.status==0">{{scope.row.id}}</div>
                <div v-else></div>
              </template>
            </el-table-column>
            <el-table-column label="客户名称">
                <template slot-scope="scope">
                <div v-if="scope.row.status==0">{{scope.row.userName}}</div>
                <div v-else></div>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="信息"></el-table-column>
            <el-table-column label="留言时间">
              <template slot-scope="scope">
                <span>{{scope.row.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="人员" width="100" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status=='1'">客服</div>
                <div v-else>用户</div>
              </template>
            </el-table-column>
          </el-table>
        <el-button type="primary" @click="dialogFormVisible = true">回复</el-button>
        </div>
      </div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="输入回复文字" :label-width="formLabelWidth">
            <el-input v-model="form.message" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMessage">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { formatDate } from '@/utils/validate.js';
import {
  MSG_DIALOG,MSG_LIST,MSG_ADD
} from '@/utils/api';
export default {
  data() {
    return {
      formLabelWidth: '120px',
      toId:0,
      dialogFormVisible: false,
      form:{
        message:'',
      },
      customerList: [
      ],
      tableData: []
    };
  },
  filters: {
		    formatDate(time) {
            var date = new Date(time*1000);
		        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		    }
		  },
  mounted(){
     this.initData()
  },
  methods: {
    addMessage(){
      MSG_ADD({ 
        content:this.form.message,
        toId:this.toId
      }).then(res => {
        this.$message.success('回复成功')  
        this.dialogFormVisible = false
        var item={userId:this.toId}
        this.checkMessage(item,0)
      })
    },
    //  获取列表及信息
    initData() {
      MSG_DIALOG({ 
      }).then(res => {
          this.customerList=res.data
      })
    },
    checkMessage(item, index) {
      MSG_LIST({ 
        toId:item.userId,
        fromId:0,
        pageNo:1,
        pageSize:100
      }).then(res => {
          this.tableData=res.data.dataList
          this.toId=item.userId
      })
    },
    reply(row, index) {}
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.customerMessage {
  height: calc(100vh - 125px);
  padding: 10px;
  background: #fff;
  .customerList {
    width: 200px;
    height: 80%;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
    .nameList {
      width: 100%;
      //   height: 100%;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #f1f1f1;
      }
      .dot {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
      }
      .active {
        background: rgb(7, 131, 241);
      }
    }
  }
  .tableBox {
    flex: 1;
    height: 80%;
    background: #fff;
    padding: 10px 2px;
    margin-left: 15px;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
  }
}
</style>